<template>
    <div>
        <!-- 新增专家任务表单 -->
        <div class="header">
            <div class="title">
                <span>新增专家任务</span>
            </div>
            <div class="taskForm">
                <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="form.taskName" placeholder="请输入任务名称" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="任务类型" prop="taskType">
                        <el-select v-model="form.taskType" placeholder="请选择任务类型" style="width: 400px;">
                            <el-option v-for="(item,index) in taskTypes" :key="index" :label="item" :value="item" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="委托单位" prop="targetUnit">
                        <el-input v-model="form.targetUnit" placeholder="请输入委托单位" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="委托单位所在地址" prop="unitAddress">
                        <el-input v-model="form.unitAddress" placeholder="请输入委托单位所在地址" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="委托单位电话" prop="unitPhone">
                        <el-input v-model="form.unitPhone" placeholder="请输入委托单位电话" style="width: 400px;" />
                    </el-form-item>
                    <el-form-item label="任务开始时间">
                        <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" type="date" placeholder="开始日期" />
                    </el-form-item>
                    <el-form-item label="任务结束时间">
                        <el-date-picker v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" type="date" placeholder="结束日期" />
                    </el-form-item>
                    <el-form-item label="任务描述">
                        <el-input v-model="form.taskDesc" type="textarea" style="width: 400px;" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 下发专家任务-->
        <div class="content">
            <div class="title">
                <span>下发任务至专家</span>
            </div>
            <div style="margin-top: 30px;">
                <el-form ref="queryForm" :inline="true" label-width="150px">
                    <el-row>
                        <el-form-item label="专家组名称" prop="taskName">
                            <el-select v-model="groupName" placeholder="请选择专家组名称" style="display: flex; width: 400px;">
                                <el-option v-for="(item,index) in profGroups" :key="index" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专家主要从事专业" prop="profMajor">
                            <el-input v-model="profMajor" placeholder="请输入专家主要从事专业" clearable style="width: 400px;" />
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="专家学历" prop="profEdu">
                            <el-select v-model="profEdu" placeholder="请选择专家学历" style="display: flex; width: 400px;">
                                <el-option v-for="(item,index) in profEdus" :key="index" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="专家工作单位" prop="profUnitName">
                            <el-input v-model="profUnitName" placeholder="请输入专家工作单位" clearable style="width: 400px;" />
                        </el-form-item>
                    </el-row>
                </el-form>
                <div style="margin-left: 50px;">
                    <el-row :gutter="10">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="el-icon-search" size="small" @click="initProfInfos">搜索</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="success" icon="el-icon-check" size="small" :disabled="this.multipleSelection.length===0" @click="selectManyQuery">确认选取专家并提交</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="profTable">
                <el-table :data="profInfos" border stripe @selection-change="handleSelection">
                    <el-table-column type="selection" prop="profTaskId" width="50" align="center" />
                    <el-table-column prop="profName" align="center" label="姓名" width="80px" />
                    <el-table-column prop="groupName" align="center" label="所属专家组" width="120" />
                    <el-table-column prop="userSex" align="center" label="性别" width="80px" />
                    <el-table-column prop="highestEducation" align="center" label="学历" width="70px" />
                    <el-table-column prop="profTitle" align="center" label="职称" width="80px" />
                    <el-table-column prop="unitName" label="工作单位" align="center" />
                    <el-table-column prop="profPost" align="center" label="职务" width="120px" />
                    <el-table-column prop="currentMajor" align="center" label="主要从事专业" />
                    <el-table-column prop="profPhone" align="center" label="联系电话" width="120px" />
                    <el-table-column prop="profRemark" align="center" label="备注" width="80px" />
                </el-table>
                <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                    <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AddProfTask',
    data() {
        return {
            taskName: '',
            profName: '',
            targetUnit: '',
            groupName: '',
            profMajor: '',
            profUnitName: '',
            profEdu: '',
            taskTypes: [],
            profGroups: [],
            profEdus: [],
            profInfos: [],
            multipleSelection: [],
            total: 0,
            page: 1,
            size: 10,
            form: {},
            rules: {
                taskName: [
                    { required: true, message: '请输入任务名称', trigger: 'blur' }
                ],
                taskType: [
                    { required: true, message: '请输入任务类型', trigger: 'blur' }
                ],
                targetUnit: [
                    { required: true, message: '请输入委托单位', trigger: 'blur' }
                ],
                unitAddress: [
                    { required: true, message: '请输入单位所在地址', trigger: 'blur' }
                ],
                unitPhone: [
                    { required: true, message: '请输入单位电话', trigger: 'blur' },
                    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, trigger: 'blur', message: '手机号码不正确' }
                ]
            }
        }
    },
    created() {
        this.initTaskTypes()
        this.initProfGroups()
        this.initProfEdu()
        this.initProfInfos()
    },
    methods: {
        /** 获取‘任务类型’下拉框**/
        initTaskTypes() {
            this.getRequest('/system/task/listAllTaskType').then(resp => {
                if (resp) {
                    this.taskTypes = resp.data
                }
            })
        },
        /**
         * 获取‘专家组名’下拉框
         */
        initProfGroups() {
            this.getRequest('/system/group/getAllGroupName').then(resp => {
                if (resp) {
                    this.profGroups = resp.data
                }
            })
        },
        /**
         * 初始化专家信息
         */
        initProfInfos() { // 初始获取专家表格数据
            let url = '/system/task/selectProf/?page=' + this.page + '&size=' + this.size + '&groupName=' + this.groupName + '&profMajor=' + this.profMajor + '&profEdu=' + this.profEdu + '&profUnitName=' + this.profUnitName
            this.getRequest(url).then(resp => {
                if (resp) {
                    this.profInfos = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        /**
         * 获取‘学历’下拉框
         */
        initProfEdu() {
            this.getRequest('/system/group/getAllEdu').then(resp => {
                if (resp) {
                    this.profEdus = resp.data
                }
            })
        },
        /**
         * 重置按钮
         **/
        resetQuery() {
            this.groupName =  '',
            this.profMajor = '',
            this.profUnitName = '',
            this.profEdu = ''
        },
        currentChange(currentPage) {
            this.page = currentPage
            this.initProfInfos()
        },
        sizeChange(size) {
            this.size = size
            this.initProfInfos()
        },
        /**
         * 选取按钮
         * @param selection
         */
        handleSelection(selection) {
            this.multipleSelection = selection
        },
        /**
         * 选中专家，并下发任务到专家，确认选取专家按钮
         */
        selectManyQuery() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    var param = {}
                    param = Object.assign(param, this.form)
                    this.$confirm('此操作将任务下发[' + this.multipleSelection.length + ']个专家,是否继续？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        setTimeout(() => { // setTimeout()属 window 的方法，用于在指定的毫秒数后调用函数或计算表达式。
                            param.profTaskDispatchList = this.multipleSelection
                            this.postRequest('/system/task/addDispatchProfTask', param).then(resp => {
                                if (resp) {
                                    this.$message({
                                        type: 'success',
                                        message: '提交成功!'
                                    })
                                    this.$router.push({path: '/expert_task/index'})
                                }
                            })
                        }, 200)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.header {
    padding-top: 30px;
    padding-bottom: 15px;
}
.title {
    margin-left: 20px;
    color: #337ab7;
}
.taskForm {
    width: 65%;
    margin-top: 10px;
    padding: 20px;
}
.profTable {
    margin-top: 20px;
}
</style>
